<template>  
    <el-header>
        <div class="l-content">
            <!-- 图标展示 -->
            <el-button type="primary" size="small" @click="handleChange">
                <el-icon><Menu /></el-icon>
            </el-button>
            <el-breadcrumb  :separator-icon="ArrowRight">
                <el-breadcrumb-item v-for="(item, index) in levelList" :key="index">
                    <span v-if="item.redirect==='noRedirect'||index==levelList.length-1"> {{item.meta.title}}</span>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="r-content">
            <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                    <img :src="getImageUrl('user.png')" class="user">
                </span>
                <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="back">退出系统</el-dropdown-item>
                </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </el-header> 
</template>

<script setup>
import { useStore } from '../../../store'
import { getImageUrl } from '../../../utils/index'
import { ArrowRight } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import { onMounted, ref, watch } from 'vue'
import { push } from '../../../utils/index'
const route = useRoute()
const store = useStore()
const name = ref('')
const levelList = ref([])

onMounted(() => {
    getBreadcrumb()
})

const handleChange = () => {
    store.upDataIsCollapse()
}

const getBreadcrumb = () => {   
    let matched = route.matched.filter(item => item.meta && item.meta.title)
    const first = matched[0]
    levelList.value = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
}

watch(
    () => route.matched,
    () => {
        if (route.path.startsWith('/redirect/')) {
            return
        }
        getBreadcrumb()
    }
)

const handleCommand = (command) => {
    if(command == 'back') {
        push('/login')
    }
}
</script>

<style lang="scss" scoped>
.el-header{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #FFFFFF;
    height: 50px;
}
.l-content{
   display: flex;
   align-items: center;
   .el-button{
    margin-right: 20px;
   }
}
.r-content{
    .user{
        width: 40px;
        height: 40px;
        border-radius: 100%;
        cursor: pointer;
        vertical-align: middle;
    }
}
</style>